/**
 * 在这个页面里面是封装了ajax的请求方式
 * 包括 get和post
 * ajax('get','./index.php',)
 * 
 * 第1种:
 * 1. 参数的个数是固定的  没法扩展
 * 2. 参数的顺序也是固定的 必须按这个顺序进行传参
 * 3. 不方便后的扩展
 * 4. 会造成命名冲突或是全局变量污染
 * 
 * 对象: 无序属性的集合,或是键值对的集合
 * 
 * $.ajax:
 * 1. 传对象做为参数 完美的解决了参数值固定的问题
 * 2. 很好的方便后期的扩展维护
 * 3. 解决全局污染的问题
 */
//  function ajax(type,url,data,callback){

//  }

//  function ajax(params){
//    var type = params.type;
//    var url = params.url;
//  }

//  ajax({
//    type:'get',
//    url:'./index.php',
//    callback:callback
//  })

var $ = { // 变量的命名规则: 可以以大小字字母,$或_开头,绝对不能以数字开头,后面可以跟大小写字母数字或是_$
    covertToStr: function(obj) {
        var str = "";
        for (var key in obj) {
            str += key + "=" + obj[key] + "&";
        }
        // str = str.slice(0,-1);
        // return str;
        return str.slice(0, -1); // 'name=jack&age=20&gender=男'
    },
    ajax: function(params) {
        // 1. 获取参数
        var type = params.type || "get"; // 请求的类型
        var url = params.url || location.href; // 目标地址
        var data = this.covertToStr(params.data || {}); // 需要传递给后台的数据
        var success = params.success;
        // 无论是get还是post都需要遵循http协议  请求有三部分 响应也得有三部分
        // 2. 创建异步对象
        var xhr = new XMLHttpRequest();
        // 3. 设置请求行
        if (type == 'get') {
            url += "?" + data; // './index.php?name=jack&age=20&gender=男'
            data = null;
        }
        xhr.open(type, url); //  url="./index.php?name=tom&age=20&gender=男"
        // xhr.open('get','./index.php?name=jack&age=20&gender=男');
        // 4. 设置请求头
        if (type == 'post') { // 只有post的时候，才需要设置请求头
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        }
        //  5. 设置请求体
        xhr.send(data);

        // 6. 监视异步对象
        xhr.onreadystatechange = function() {
            if (xhr.status == 200 && xhr.readyState == 4) {
                //xhr.responseText// xhr.responseXML
                var res = xhr.getResponseHeader('Content-Type');
                var result;
                if (res.indexOf('application/xml') != -1) {
                    result = xhr.responseXML.querySelector('items').children; // xml格式的字符串
                } else if (res.indexOf('application/json') != -1) {
                    result = JSON.parse(xhr.responseText); // json形式的字符串
                } else {
                    result = xhr.responseText; // 普通的文本字符串
                }
                // 7. 调用方法渲染页面
                success(result);
            }
        }

    },
    getString: function() {

    },
    getData: function() {

    }
}

// $.ajax({
//   type:'get',
//   url:'./index.php',
//   data:{
//     name:'tom',
//     age:20,
//     gender:'男'
//   }
// })